import * as React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  SafeAreaView,
  ImageBackground,
} from 'react-native';
import { FontAwesome, MaterialIcons } from '@expo/vector-icons';
import { Colors } from '@/contants/Colors';
import { Dropdown } from 'react-native-element-dropdown';

// default HeaderComponents format
{
  /* 
<HeaderComponents
    company_name={this.state.login_data.company_id}
    title={""}
    rightIcon={""} //report / download
    rightIconFunction={(resp) => console.log(resp)}
    invTypeList={[]}
    showInvType={true} // true / false
    invTypeListDropDownChange={(item) => console.log("dropdown changed to ", item)}
/> 
*/
}

type HeaderProps = {
  showNotify: boolean;
  leftIconFunction: () => void;
  company_name?: string | undefined;
  rightIcon?: string;
  rightIconFunction?: (action: string) => void;
  showInvType?: boolean;
  invTypeList?: Array<any>;
  title?: string;
  invTypeListDropDownChange?: (item: any) => void;
};

const HeaderComponents: React.FC<HeaderProps> = (props) => {
  return (
    <ImageBackground style={stylesLocalHeader.header} blurRadius={5}>
      <View style={stylesLocalHeader.headerRow}>
        {props.showNotify ? (
          <TouchableOpacity onPress={() => props.leftIconFunction()}>
            <MaterialIcons
              name="notifications"
              size={24}
              color={Colors.mainColor}
            />
          </TouchableOpacity>
        ) : (
          <View style={{ width: 24 }} />
        )}
        <Text style={stylesLocalHeader.headerTitle}>{props.company_name}</Text>

        {/* rightIcon */}
        {/* download, report */}
        {props.rightIcon == 'download' && (
          <TouchableOpacity
            onPress={() =>
              props.rightIconFunction
                ? props.rightIconFunction('response download')
                : ''
            }
          >
            <MaterialIcons name="download" size={24} color={Colors.mainColor} />
          </TouchableOpacity>
        )}
        {props.rightIcon == 'report' && (
          <TouchableOpacity
            onPress={() =>
              props.rightIconFunction
                ? props.rightIconFunction('response report')
                : ''
            }
          >
            <MaterialIcons
              name="bar-chart"
              size={24}
              color={Colors.mainColor}
            />
          </TouchableOpacity>
        )}
        {!props.rightIcon && (
          <TouchableOpacity
            onPress={() =>
              props.rightIconFunction
                ? props.rightIconFunction('response download')
                : ''
            }
          >
            <MaterialIcons
              name="folder-zip"
              size={24}
              color={Colors.mainColor}
            />
          </TouchableOpacity>
        )}
      </View>

      <View style={{ alignItems: 'center' }}>
        {props.showInvType ? (
          <Dropdown
            style={[
              {
                height: 29.5,
                width: 120,
                borderWidth: 1,
                borderColor: Colors.mainColor,
                borderRadius: 10,
                paddingLeft: 15,
              },
            ]}
            placeholderStyle={[
              stylesLocalHeader.placeholderStyle,
              { color: Colors.mainColor, textAlign: 'center', fontSize: 14 },
            ]}
            selectedTextStyle={[
              stylesLocalHeader.selectedTextStyle,
              { color: Colors.mainColor, textAlign: 'center', fontSize: 14 },
            ]}
            inputSearchStyle={[
              stylesLocalHeader.inputSearchStyle,
              { color: Colors.mainColor, textAlign: 'center', fontSize: 14 },
            ]}
            iconStyle={stylesLocalHeader.iconStyle}
            data={props.invTypeList ? props.invTypeList : []}
            maxHeight={400}
            labelField="label"
            valueField="value"
            itemTextStyle={{ fontSize: 12 }}
            placeholder={props.title}
            value={1}
            onChange={(item) => props.invTypeListDropDownChange ? props.invTypeListDropDownChange(item) :''}
          />
        ) : (
          <Text style={[stylesLocalHeader.subtitle, {}]}>{props.title}</Text>
        )}
      </View>
    </ImageBackground>
  );
};

const stylesLocalHeader = StyleSheet.create({
  section: {
    height: 10,
    backgroundColor: Colors.lightgrey,
  },
  header: {
    paddingTop: 5,
    justifyContent: 'center',
    paddingHorizontal: 15,
    height: 50,
  },
  headerRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  headerTitle: {
    color: Colors.mainColor,
    fontSize: 18,
    fontWeight: 'bold',
  },
  subtitle: {
    color: Colors.mainColor,
    fontSize: 16,
    textAlign: 'center',
    marginTop: 10,
  },

  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 30,
    height: 30,
    tintColor: Colors.mainColor,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 12,
  },
});

export default HeaderComponents;
